<template>
  <div class="newsCenter">
    <u-nav-bar :title="'消息中心'">
      <div>
        <div class="setting__area" @click.stop.prevent="menuShow = true"><van-icon name="setting-o" /></div>
      </div>
    </u-nav-bar>
    <van-action-sheet v-model:show="menuShow" :actions="menuList" @select="onMenuSelect" />
    <div class="newsCenter__ct">
      <div class="newsCenter__ct__item" v-for="item in dataList" :key="item.id" @click="handleGoDetail(item.id)">
        <div class="newsCenter__ct__item__icon" :class="`newsCenter__ct__item__icon${item.id}`">
          <img :src="item.img" />
          <div class="tip" v-if="item && item.tipNum">
            {{ item.tipNum < 100 ? item.tipNum : `99+` }}
          </div>
        </div>
        <div class="newsCenter__ct__item__msg" :class="item.memo ? '' : 'newsCenter__ct__item__msg__single'">
          <div class="top">
            <div class="title">
              <div>{{ item.title }}</div>
              <div class="time" v-if="item.date">({{ moment(item.date).fromNow() }})</div>
            </div>
          </div>
          <div class="bt">
            <div class="memo">{{ item.memo }}</div>
          </div>
        </div>
        <div class="newsCenter__ct__item__arrow"><van-icon name="arrow" /></div>
      </div>
    </div>
    <!-- <Toast v-if="show" :message="toastMessage" /> -->
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import store from '@/store/index'
import uNavBar from '@/components/NavBar.vue'
import { ActionSheet, Dialog, Toast } from 'vant'
import { sysList, handleGetNoReadNotice } from './common'
import { getNewsInfo } from '@/store/localstorage'
moment.locale('zh-cn')

type NewsCenterItem = {
  id: number
  title: string
  memo: string
  date: string
  tipNum: number
  img: string
}

type NewsCenter = {
  dataList: {
    '0': NewsCenterItem
    '1': NewsCenterItem
    '2': NewsCenterItem
    '4': NewsCenterItem
    [propname: string]: any
  }
  menuList: NewsCenterMenuItem[]
  menuShow: boolean
}

type NewsCenterMenuItem = {
  id: number
  name: string
}

export default defineComponent({
  name: 'newsCenter',
  components: { 'u-nav-bar': uNavBar, 'van-action-sheet': ActionSheet, [Dialog.Component.name]: Dialog.Component },

  setup() {
    const data = reactive<NewsCenter>({
      dataList: JSON.parse(JSON.stringify(sysList)),
      menuList: [
        {
          id: 1,
          name: '清空未读'
        }
        // {
        //   id: 2,
        //   name: '消息设置'
        // }
      ],
      menuShow: false
    })

    /** 事件区域 */

    const router = useRouter()

    const userInfo = store.getters['user/getUserInfo']

    data.dataList = Object.assign(data.dataList, getNewsInfo())

    // 跳转类型列表
    const handleGoDetail = (id: number): void => {
      switch (id) {
        case 0:
          router.push({ name: 'NewsCenterAlarm' })
          break
        case 1:
          router.push({ name: 'NewsCenterSystem' })
          break
        case 2:
          router.push({ name: 'NewsCenterWaybill' })
          break
        case 3:
          router.push({ name: 'NewsCenterActivity' })
          break
        default:
          break
      }
    }

    const beforeClose = async (action: any): Promise<any> => {
      if (action === 'confirm') {
        const result = await store.dispatch('newsCenter/handleSysNoticeReadingByType', {
          type: 1,
          system: 1,
          isShow: true
        })
        data.menuShow = false
        if (result) {
          Toast.success('清除成功')
        }
        data.dataList = await handleGetNoReadNotice()
        return true
      } else {
        // 拦截取消操作
        data.menuShow = false
        Dialog.close()
        return false
      }
    }

    // 点击设置
    const onMenuSelect = (e: any): void => {
      switch (e.id) {
        case 1:
          Dialog.confirm({
            title: '清空未读',
            message: '是否将全部未读消息标记为已读',
            beforeClose
          })
          break
        case 2:
          router.push({ name: 'NewsSetting' })
          break
        default:
          break
      }
    }

    /** 操作区域 */
    const _data = toRefs(data)
    onMounted(async () => {
      data.dataList = await handleGetNoReadNotice()
    })
    return {
      ..._data,
      handleGoDetail,
      onMenuSelect,
      moment
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.newsCenter {
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;
  .setting__area {
    font-size: 20px;
  }
  &__ct {
    @include flex-scroll-content-pd(24px 12px 0 12px);
    background-color: white;
    &__item {
      width: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: unset;
      position: relative;
      &::after {
        @include px-1;
      }
      &__icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        position: relative;

        img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .tip {
          position: absolute;
          min-width: 16px;
          height: 20px;
          background-color: $pink;
          border-radius: 50%;
          right: -3px;
          top: -5px;
          font-size: 10px;
          text-align: center;
          line-height: 20px;
          color: white;
          padding: 0 2px;
        }
      }
      &__icon1 {
        background: linear-gradient(124deg, #74cdff 0%, #409eff 100%);
        box-shadow: 0px 2px 10px 0px rgba(0, 119, 195, 0.36);
      }
      &__icon2 {
        background: linear-gradient(124deg, #ffd67a 0%, #ffc201 100%);
        box-shadow: 0px 2px 10px 0px rgba(255, 202, 44, 0.34);
      }
      &__icon3 {
        background: linear-gradient(124deg, #ff88bb 0%, #fd5861 100%);
        box-shadow: 0px 2px 10px 0px rgba(246, 87, 113, 0.34);
      }

      &__arrow {
        width: 20px;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #9fa2af;
      }

      &__msg {
        width: calc(100% - 72px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 32px;
        margin-left: 10px;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .top {
          .title {
            font-size: 12px;
            color: #333333;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          .time {
            padding-left: 10px;
            font-weight: 400;
            color: #333;
          }
        }
        .bt {
          overflow: hidden;
          .memo {
            font-size: 11px;
            color: $color-text-secondary;
            color: #333333;
            @include ellipsis;
          }
        }
      }
      &__msg__single {
        justify-content: center;
      }
    }
  }
}
</style>
